<template>
  <div class="login-container">
    <a-row>
      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="login-container-form">
          <div class="login-container-hello">您好!</div>
          <div class="login-container-title">欢迎来到管理后台</div>
          <a-form
            ref="formRef"
            :model="form"
            :rules="rules"
            @keyup.enter="handleSubmit"
          >
            <a-form-item>
              <a-input
                v-model:value="form.username"
                autocomplete="off"
                placeholder="请输入账号"
              >
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-model:value="form.password"
                autocomplete="off"
                placeholder="请输入密码"
              >
                <template #prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="16">
                <a-col class="gutter-row" :span="12">
                  <a-input
                    v-model:value="form.captcha"
                    autocomplete="off"
                    placeholder="请输入验证码"
                  >
                    <template #prefix>
                      <QrcodeOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <img
                    @click="changeCaptcha"
                    :src="imgBase64"
                    style="width: 130px"
                  />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item>
              <a-button
                :loading="loading"
                type="primary"
                @click="handleSubmit()"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <div class="login-container-tips">
      基于vue3+ant-design-vue+vite+ts开发的开源通用后台框架
    </div>
  </div>
</template>

<script lang="ts">
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { LoginFrom } from "@/types/views/login";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import {
  UserOutlined,
  LockOutlined,
  QrcodeOutlined,
} from "@ant-design/icons-vue";
import ResultEnum from "@/config/ResultEnum";
import { checkRules, getCaptcha } from "./login";
import { Md5 } from "ts-md5/dist/md5";

export default defineComponent({
  name: "login",
  components: {
    UserOutlined,
    LockOutlined,
    QrcodeOutlined,
  },
  setup() {
    // 表单数据
    const form = data_form();
    const imgBase64 = ref();

    const rules = reactive(checkRules);

    const formRef = ref();

    const store = useStore();

    const router = useRouter();
    const loading = ref(false);

    /**
     * @desc: 登录提交
     * @param 无
     */
    const handleSubmit = (): void => {
      formRef.value.validate().then(() => {
        loading.value = true;
        let password = Md5.hashStr(form.password);
        store
          .dispatch("user/login", {
            username: form.username,
            password: password,
            captcha: form.captcha,
            token: form.token.toString(),
          })
          .then((e) => {
            loading.value = false;
            const route = router.currentRoute.value;
            //const url = route.query.redirect || "/desktop";
            const url = "/desktop";
            router.push(url as string);
          })
          .catch((err) => {
            console.log("err is ", err);
            loading.value = false;
            message.error(err.message);
          });
      });
    };

    const changeCaptcha = () => {
      getCaptcha().then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          imgBase64.value = res.result.base64;
          form.token = res.result.token;
        } else {
          message.error(res.message);
        }
      });
    };

    onMounted(() => {
      changeCaptcha();
    });

    return {
      formRef,
      form,
      rules,
      handleSubmit,
      imgBase64,
      changeCaptcha,
      loading,
    };
  },
});

function data_form() {
  const form: UnwrapRef<LoginFrom> = reactive({
    username: "superadmin",
    password: "888888",
    captcha: "",
    token: "",
  });
  return form;
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url("/src/assets/login/login_bg.png");
  background-size: cover;
  overflow: hidden;
  & .login-container-form {
    width: calc(100% - 40px);
    //height: 400px;
    padding: 4vh;
    margin-top: calc((100vh - 380px) / 2);
    margin-right: 20px;
    margin-left: 20px;
    background: url("/src/assets/login/form_bg.png");
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    & .login-container-hello {
      font-size: 32px;
      color: #fff;
    }
    & .login-container-title {
      margin-bottom: 30px;
      font-size: 20px;
      color: #fff;
    }
  }
  .login-container-tips {
    position: fixed;
    bottom: 10px;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }
}
</style>
<style lang="scss">
.login-container {
  & .login-container-form {
    & .ant-col {
      width: 100%;
      padding: 0 10px 0 10px;
    }
    & .ant-input {
      height: 35px;
    }
    & .ant-btn {
      width: 100%;
      height: 45px;
      border-radius: 99px;
    }
    & .ant-form-item-explain-error {
      color: #faad14;
    }
    & .ant-form-item-has-error {
      border-color: #faad14;
    }
  }
}
</style>
